<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>bootstrap-daterangepicker</title>

    <!-- Bootstrap -->
    <link href=.../../statics/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href=.../../statics/css/font-awesome.min.css" rel="stylesheet"> 
    <!-- bootstrap-daterangepicker -->
	<link rel="stylesheet" href=.../../statics/plugins/bootstrap-daterangepicker/daterangepicker.css" />
	
	<!-- Custom Theme Style -->
    <link href=.../../statics/css/custom.css" rel="stylesheet"> 
  </head>

  <body class="nav-md">
    <div class="container body">
      <div class="main_container">
         
        <!-- page content -->
        <div class="framebody" role="main" >
          <div class="">
            <div class="page-title">
              <div class="title_left">
                <h3>bootstrap-daterangepicker</h3>
              </div>
            </div>
            <div class="clearfix"></div>

            <div class="row">

              <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                  <div class="x_content">
                  	<div class="row well">
                  		<h2><a href="http://www.daterangepicker.com/">>>daterangepicker官方文档</a></h2>
						<h2><a href="http://momentjs.cn/">>>附:Moment.js JavaScript 日期处理类库</a></h2>
					</div>
 					<form class="form-horizontal form-label-left">
 						
                  		<div class="item form-group">
                  			<label class="control-label col-md-1" for="name">日期：</label>
	                        <div class="col-md-2 datetime">
	                        	<input type="text" id="date1" class="form-control">
	                        	<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
	                        </div>
	                        <div class="col-md-2">
	                        	<a id="btnGetDate" class="btn btn-primary">获取时间</a>
	                        	<a id="btnSetDate" class="btn btn-primary">设置时间</a>
	                        </div> 
                  		</div>
                  		<div class="item form-group">
                  			<label class="control-label col-md-1" for="name">日期时间：</label>
	                        <div class="col-md-2 datetime">
	                        	<input type="text" id="date2" class="form-control">
	                        	<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
	                        </div>
                  		</div>
                  		<div class="item form-group">
                  			<label class="control-label col-md-1" for="name">日期范围：</label>
	                        <div class="col-md-2 datetime">
	                        	<input type="text" id="date3" class="form-control">
	                        	<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
	                        </div>
                  		</div>
                  		<div class="item form-group">
                  			<label class="control-label col-md-1" for="name">日期时间范围：</label>
	                        <div class="col-md-3 datetime">
	                        	<input type="text" id="date4" class="form-control">
	                        	<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
	                        </div>
	                        <div class="col-md-2">
	                        	<a id="btnGetRangeDateTime" class="btn btn-primary">获取时间</a>
	                        	<a id="btnSetRangeDateTime" class="btn btn-primary">设置时间</a>
	                        </div> 
                  		</div>
                  	</form>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- /page content -->

        
      </div>
    </div>

    <!-- jQuery -->
    <script src=.../../statics/js/jquery.1.11.3.min.js"></script>
    <!-- Bootstrap -->
    <script src=.../../statics/js/bootstrap.min.js"></script>   
    <!-- bootstrap-daterangepicker -->
    <script src=.../../statics/plugins/bootstrap-daterangepicker/moment.min.js"></script>
	<script src=.../../statics/plugins/bootstrap-daterangepicker/daterangepicker.js"></script>
     
    <!-- Custom Theme Scripts -->
    <script src=.../../statics/js/custom.js"></script>
	
	<script type="text/javascript">
		sys.datepicker({id: 'date1', type:'date'});
		sys.datepicker({id: 'date2', type:'datetime', startDate: moment().subtract(1, "days")
			},
			function(date) {
				console.log(date.format('YYYY-MM-DD HH:mm:ss'))
			}
		);
		sys.daterangepicker({id: 'date3', type:'date'});
		sys.daterangepicker({id: 'date4', type:'datetime',
			startDate: moment().subtract(2, "days"), //当前时间减去一天时间
			maxDate:new Date()}
		);
		
		$('#btnGetDate').on('click', function(){
			alert($('#date1').val())
		})
		$('#btnSetDate').on('click', function(){
			$('#date1').val(moment().format('YYYY-MM-DD'))
		})
		$('#btnGetRangeDateTime').on('click', function(){
			if ($('#date4').val().indexOf(' - ') > 0) {
				var startDateTime = $('#date4').val().split(' - ')[0];
				var endDateTime = $('#date4').val().split(' - ')[1];
				alert('startDateTime='+startDateTime + '   endDateTime='+endDateTime)
			}
		})
		$('#btnSetRangeDateTime').on('click', function(){
			$('#date4').data('daterangepicker').setStartDate(moment().subtract(1, "months").format('YYYY-MM-DD HH:mm:ss'));
			$('#date4').data('daterangepicker').setEndDate(moment().format('YYYY-MM-DD HH:mm:ss'))
		})
	</script>
	
  </body>
</html>